<%= card_article_tag card, class: "card" do %>
  <div class="flex flex-column flex-item-grow max-inline-size">
    <header class="card__header">
      <div class="card__board flex align-start">
          <span class="card__id">
            <span class="for-screen-reader">Card number</span>
            <%= card.number %>
          </span>
        <span class="card__board-name">
            <span class="overflow-ellipsis"><%= card.board.name %></span>
          </span>
      </div>

      <%= render "cards/display/preview/tags", card: card %>
    </header>

    <div class="card__body justify-space-between">
      <div class="card__content">
        <h1 class="card__title overflow-line-clamp">
          <%= card.title %>
        </h1>
      </div>

      <%= render "cards/display/public_preview/columns", card: card if card.triaged? %>
    </div>
  </div>

  <footer class="card__footer">
    <%= render "cards/display/public_preview/meta", card: card %>
  </footer>

  <%= render "cards/display/common/background", card: card %>

  <%= link_to published_card_path(card), class: "card__link", title: card_title_tag(card), data: { turbo_frame: "_top" } do %>
    <span class="for-screen-reader"><%= card.title %></span>
  <% end %>

  <% if card.entropic? %>
    <%= render "cards/display/preview/bubble", card: card %>
    <span class="card__board-name"></span>
  <% end %>
<% end %>
